<template>
  <div>
    <el-form inline>
      <el-form-item>
        <el-button type="primary" @click="addAndEditEvent(null)">添加</el-button>
        <el-button type="primary" @click="infoRequest">刷新</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="tableLoading" :data="tableData">
      <el-table-column label="编号" align="center" prop="id" width="80"/>
      <el-table-column label="创建日期" align="center" prop="createTime" width="140px"/>
      <el-table-column label="规则名称" align="center" prop="rulesName"/>
      <el-table-column label="上级/企业%" align="center"
                       :formatter="(row)=>row.relationship == 1 ? row.superiorDistributor : row.companyRatio"/>
      <el-table-column label="分销人/员工%" align="center"
                       :formatter="(row)=>row.relationship == 1 ? row.subDistributor : row.staffRatio"/>
      <el-table-column label="客户%" align="center" prop="customerRatio"/>
      <el-table-column label="平台%" align="center" prop="platformRatio"/>
      <el-table-column label="分佣关系" align="center" prop="relationship"
                       :formatter="(row, column, cellValue)=>!cellValue ? '' : cellValue == '1' ? '分销人' : '企业员工'"/>
      <el-table-column label="操作" align="center" width="200px">
        <template slot-scope="{row, $index}">
          <el-button type="text" @click="addAndEditEvent(row)">编辑</el-button>
          <el-button type="text" :style="{color: row.sign == 1 ? '#F56C6C':'#409EFF'}" @click="startOrQause(row)">
            {{row.sign == '1' ? '停用' : '启用'}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="queryData.total" :page.sync="queryData.pageNum" :limit.sync="queryData.pageSize"
                @pagination="getRequestList()"/>
    <el-drawer title="规则信息" :visible.sync="drawer" direction="rtl" size="500px" :before-close="formClose"
               destroy-on-close custom-class="drawer-custom">
      <el-form :model="formData" :rules="formRules" ref="form-data" class="form-data">
        <el-form-item label="规则名称" prop="rulesName">
          <el-input v-model="formData.rulesName" placeholder="请输入规则名称"/>
        </el-form-item>
        <el-form-item label="分佣关系">
          <el-radio-group v-model="formData.relationship">
            <el-radio label="1">分销人</el-radio>
            <el-radio label="2">企业员工</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="formData.relationship == '1'">
          <el-form-item label="上级分销人" prop="superiorDistributor">
            <el-input v-model="formData.superiorDistributor" type="number" placeholder="请输入上级分销人佣金所占比" :min="0"
                      :maxlength="100">
              <div slot="suffix" class="row-div" style="height: 100%;padding: 0 5px">%</div>
            </el-input>
          </el-form-item>
          <el-form-item label="分销人" prop="subDistributor">
            <el-input v-model="formData.subDistributor" type="number" placeholder="请输入分销人佣金所占比" :min="0" :max="100">
              <div slot="suffix" class="row-div" style="height: 100%;padding: 0 5px">%</div>
            </el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="企业" prop="companyRatio">
            <el-input v-model="formData.companyRatio" type="number" placeholder="请输入企业佣金所占比" :min="0" :max="100">
              <div slot="suffix" class="row-div" style="height: 100%;padding: 0 5px">%</div>
            </el-input>
          </el-form-item>
          <el-form-item label="员工" prop="staffRatio">
            <el-input v-model="formData.staffRatio" type="number" placeholder="请输入员工佣金所占比" :min="0" :max="100">
              <div slot="suffix" class="row-div" style="height: 100%;padding: 0 5px">%</div>
            </el-input>
          </el-form-item>
        </div>
        <el-form-item label="客户" prop="customerRatio">
          <el-input v-model="formData.customerRatio" type="number" placeholder="请输入客户佣金所占比" :min="0" :max="100">
            <div slot="suffix" class="row-div" style="height: 100%;padding: 0 5px">%</div>
          </el-input>
        </el-form-item>
        <el-form-item label="平台分佣占比" prop="platformRatio">
          {{platformRatioCompile}}%
        </el-form-item>
        <el-form-item class="form-but-view">
          <el-button class="but-view" type="primary" @click="submit">提 交</el-button>
          <el-button class="but-view" @click="formClose">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
  import {
    getAppletRulesList,
    getAppletRulesAdd,
    getAppletRulesEdit,
    getAppletRulesEditSign
  } from "@/api/eh-api";
  function validator (rule, value, callback) {
    const {subDistributor, superiorDistributor, customerRatio, staffRatio, companyRatio, relationship} = this.formData;
    const arr = [relationship == 1 ? subDistributor : staffRatio , relationship == 1 ? superiorDistributor : companyRatio, customerRatio].sort((a,b) => a-b)
    const cont = 100 - arr.reduce((prev, curr) => (prev - 0) + (curr - 0));
    return (parseInt(value) < 0 || parseInt(value) > 100 ? callback(new Error('请输入0 - 100 之间的百分比')) : cont < 0 ? callback(new Error('超出总占比')) : callback())
  }
  export default {
    name: "commissionRule",
    data() {
      return {
        tableLoading: false,
        drawer: false,
        tableData: [],
        queryData: {
          total: 0,
          pageNum: 1,
          pageSize: 10
        },
        formData: {
          customerRatio: null, // 客户佣金所占比
          platformRatio: null, // 平台佣金所占比
          id: null, // 修改需要 新增不需要
          rulesName: null, // 规则名称
          subDistributor: null, // 下级分销人佣金所占比
          superiorDistributor: null, // 上级分销人佣金占比
          relationship: '1',
          companyRatio: null,// 企业佣金占比
          staffRatio: null,// 员工佣金占比
        },
        formRules: {
          rulesName: [
            {required: true, message: '请输入规则名称', trigger: 'blur'},
          ],
          superiorDistributor: [
            {required: true, message: '请输入分销人佣金占比', trigger: 'blur'},
            {
              trigger: 'blur', validator: validator.bind(this)
            }
          ],
          subDistributor: [
            {required: true, message: '请输入下级分销人佣金所占比', trigger: 'blur'},
            {
              trigger: 'blur', validator: validator.bind(this)
            }
          ],
          companyRatio: [
            {required: true, message: '请输入企业佣金占比', trigger: 'blur'},
            {
              trigger: 'blur', validator: validator.bind(this)
            }
          ],
          staffRatio: [
            {required: true, message: '请输入员工佣金占比', trigger: 'blur'},
            {
              trigger: 'blur', validator: validator.bind(this)
            }
          ],
          customerRatio: [
            {required: true, message: '请输入客户佣金所占比', trigger: 'blur'},
            {
              trigger: 'blur', validator: validator.bind(this)
            }
          ]
        }
      }
    },
    beforeMount() {
      this.infoRequest()
    },
    computed: {
      platformRatioCompile() {
        const {subDistributor, superiorDistributor, customerRatio, staffRatio, companyRatio, relationship} = this.formData;
        const arr = [relationship == 1 ? subDistributor : staffRatio , relationship == 1 ? superiorDistributor : companyRatio, customerRatio].sort((a,b) => a-b)
        const sum = arr.reduce((prev, curr) => (prev - 0) + (curr - 0));
        this.formData.platformRatio = 100 - sum < 0 ? 0 : 100 - sum;
        return this.formData.platformRatio
      }
    },
    methods: {
      async startOrQause(row) {
        await getAppletRulesEditSign({
          id: row.id,
          sign: row.sign == '1' ? '2' : '1'
        });
        this.$message.success('操作成功!');
        this.getRequestList()
      },
      /**
       * 刷新事件
       */
      infoRequest() {
        this.queryData.pageNum = 1
        this.getRequestList()
      },
      /**
       * 获取列表数据
       */
      async getRequestList() {
        const res = await getAppletRulesList(this.queryData);
        if (res.code != 200) return this.$message.warning(res.mag);
        this.tableData = res.rows;
        this.queryData.total = res.total - 0;
      },

      /**
       * 添加或修改事件
       */
      addAndEditEvent(row) {
        row ? this.formData = JSON.parse(JSON.stringify(row)) : this.formData.id = null;
        this.drawer = true
      },
      /**
       * 修改看房工单请求
       */
      submit() {
        this.$refs['form-data'].validate(async (valid) => {
          if (!valid) return this.$message.warning('请将内容填写完整!');
          const formData = JSON.parse(JSON.stringify(this.formData));
          formData.id ? await getAppletRulesEdit(formData) : await getAppletRulesAdd(formData);
          this.$message.success('操作成功!');
          this.formClose();
          this.getRequestList();
        });
      },
      /**
       * 取消抽屉 并重置form 表单
       */
      formClose() {
        this.$refs['form-data'].resetFields(this.formData)
        this.drawer = false
      },
    }
  }
</script>

<style scoped>

</style>
